$(function () {
    //减少商品数量
    $('#subShop').click(function () {
        if($('#shopNum').val() == "1"){
            return;
        }
        let num = parseInt($('#shopNum').val())-1;
        $('#shopNum').val(num);
    });

    //添加商品数量
    $('#addShop').click(function () {
        let num = parseInt($('#shopNum').val())+1;
        $('#shopNum').val(num);
    });


    //商品详情被点击
    $('#detailBtn').click(function () {
        $('#detailBtn').addClass('activate');
        $('#shopCommitContent1').show();
        $('#commitBtn').removeClass('activate');
        $('#shopCommitContent2').hide();
    });


    //评论被点击
    $('#commitBtn').click(function () {
        $('#detailBtn').removeClass('activate');
        $('#shopCommitContent1').hide();
        $('#commitBtn').addClass('activate');
        $('#shopCommitContent2').show();
    });


    // 鼠标移入小图、替换大图
    $('.simage').mouseover(function (ele) {
        let src = $(this).attr('src');
        $('.bimage').attr('src', src);
        // document.getElementById("bimage1").src = src;
    });

    // 实现放大镜效果
    var Box = document.getElementById("shopLeftBox");
    var bigBox = document.getElementById("shopLeftBigBox");
    var bigbox = getChildNodes(bigBox)[0];//获取大盒子里面的img
    var lay = document.getElementById("lay");//一个正方形

    //鼠标移入时，将放大镜和bigBox显示出来
    Box.onmouseover = function () {
        lay.style.display = "block";
        bigBox.style.display = "block";
    }
    //鼠标移出时，将放大镜和bigBox隐藏起来
    Box.onmouseout = function () {
        lay.style.display = "none";
        bigBox.style.display = "none";
    }

    // 当鼠标在盒子里移动时
    Box.onmousemove = function (e) {
        e = e || event;//事件源的兼容问题
        var scale = 2;//图片的放缩比例
        //将鼠标放到放大镜的中间
        var x = e.clientX - lay.offsetWidth / 2;
        var y = e.clientY - lay.offsetHeight / 2;
        //将放大镜的宽高与盒子的宽高结合起来按比例放缩
        lay.style.width = parseInt(Box.offsetWidth / scale) + "px";
        lay.style.height = parseInt(Box.offsetHeight / scale) + "px";
        //设置大图片的宽高
        bigbox.style.width = Box.offsetWidth * scale + "px";
        bigbox.style.height = Box.offsetHeight * scale + "px";

        let X = $(Box).offset().left;
        let Y = $(Box).offset().top - $(document).scrollTop();
        let lb = X;  //左
        let rb = X + Box.offsetWidth - lay.offsetWidth;//右
        let ub = Y;//上
        let db = Y + Box.offsetWidth - lay.offsetWidth;//下

        x = x < lb ? lb : x;
        x = x >= rb ? rb : x;
        y = y < ub ? ub : y;
        y = y >= db ? db : y;

        lay.style.left = x - X + "px";//相对于父亲的偏移量
        lay.style.top = y - Y + "px";

        var left = lay.offsetLeft * scale;//相对父亲的偏移量
        var top = lay.offsetTop * scale;
        bigbox.style.marginLeft = (left * (-1)) + "px";
        bigbox.style.marginTop = (top * (-1)) + "px";


    }

    /* $('body').mousemove(function(e){
        e = e || event;//事件源的兼容问题
        var scale = 4;//图片的放缩比例
        //将鼠标放到放大镜的中间
        var x = e.clientX - lay.offsetWidth / 2;
        var y = e.clientY - lay.offsetHeight / 2;
        // console.log(e.clientX, e.clientY);
    }); */
});

//获取孩子元素的节点
function getChildNodes(element) {
    var arr = [];
    var eList = element.childNodes;
    for (var i = 0; i < eList.length; i++) {
        if (eList[i].nodeType == 1) { //过滤空白节点
            arr.push(eList[i]);
        }
    }
    return arr;
}